<template>
  <q-scroll-area class="fit">
    <q-dialog v-model="addView" persistent>
      <user-add
        @close-drawer="
          () => {
            addView = false;
          }
        "
      ></user-add>
    </q-dialog>
    <q-card class="no-shadow" bordered>
      <q-card-section class="q-pa-none">
        <q-table
          square
          class="no-shadow"
          title="用户列表"
          :rows="data"
          :columns="columns"
          row-key="id"
          selection="multiple"
          v-model:selected="selected"
          :filter="filter"
          :visible-columns="visibleColumns"
        >
          <template v-slot:body-cell-oper="props">
            <q-td :props="props">
              <q-btn
                size="sm"
                color="primary"
                label="修改"
                flat
                @click="clickItem(props.row)"
              />
              <q-btn size="sm" color="deep-orange" label="删除" flat />
            </q-td>
          </template>
          <template v-slot:top-left>
            <div class="q-gutter-sm">
              <q-btn
                color="primary"
                label="新增"
                @click="
                  () => {
                    addView = true;
                  }
                "
              />
              <q-btn
                color="negative"
                label="删除"
                :disable="selected.length === 0"
                @click="delItem"
              />
            </div>
          </template>
          <template v-slot:top-right>
            <q-input
              v-if="show_filter"
              filled
              borderless
              dense
              debounce="300"
              v-model="filter"
              placeholder="搜索"
            >
              <template v-slot:append>
                <q-icon name="search" />
              </template>
            </q-input>

            <q-btn
              class="q-ml-sm"
              icon="filter_list"
              @click="show_filter = !show_filter"
              flat
            />
            <q-select
              class="q-ml-sm"
              v-model="visibleColumns"
              multiple
              outlined
              dense
              options-dense
              display-value="展示列"
              emit-value
              map-options
              :options="columns.filter((i) => !i.required)"
              option-value="name"
              options-cover
              style="min-width: 120px"
            />
          </template>
        </q-table>
      </q-card-section>
    </q-card>
  </q-scroll-area>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';
import { QTableProps, useQuasar } from 'quasar';
import { userList } from 'pages/data/list';

const userAdd = defineAsyncComponent(
  () => import('components/users/UserAdd.vue')
);

const $q = useQuasar();
const show_filter = ref(false);
const filter = ref('');
const selected = ref([]);
const clickItem = (item: (typeof userList)[0]) => {
  $q.notify({
    message: item.name,
    position: 'center',
  });
};
const delItem = () => {
  let msg = '';
  if (selected.value.length == 0) {
    msg = '请至少勾选一条数据';
  } else {
    msg = JSON.stringify(selected.value);
  }
  $q.notify({
    message: msg,
    position: 'center',
  });
};
const addView = ref(false);
const data = userList;
const columns: QTableProps['columns'] = [
  {
    name: 'name',
    required: true,
    label: '姓名',
    align: 'left',
    field: (row) => row.name,
    format: (val) => `${val}`,
    sortable: true,
  },
  {
    name: 'loginNo',
    align: 'center',
    label: '帐号',
    field: 'loginNo',
  },
  {
    name: 'typeName',
    align: 'center',
    label: '类别',
    field: 'typeName',
  },
  { name: 'roleName', align: 'center', label: '角色', field: 'roleName' },
  { name: 'status', align: 'center', label: '状态', field: 'status' },
  {
    name: 'oper',
    required: true,
    align: 'center',
    label: '操作',
    field: 'sodium',
  },
];
const visibleColumns = ref(columns.map((i) => i.name));
</script>
